<template v-for="style in styles" :key="style.attributeName">
  <!-- Image -->
  <template v-if="style.inputType === 'Image'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-button-group>
        <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传图片', name: 'formLayerImageUpload', inputType: style.inputType, attributeName: style.attributeName, no: 0})">
          上传
        </el-button>
        <el-dropdown v-if="typeof btnImageSelectClick !== 'undefined'" v-on:command="btnImageSelectClick">
          <el-button size="mini" type="info" icon="el-icon-folder-opened" plain>
            选择<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="typeof siteId !== 'undefined'" :command="{inputType: style.inputType, attributeName: style.attributeName, no: 0, type: 'uploadedImages'}">已上传图片</el-dropdown-item>
            <el-dropdown-item :command="{inputType: style.inputType, attributeName: style.attributeName, no: 0, type: 'materialImages'}">素材库图片</el-dropdown-item>
            <!-- <el-dropdown-item :disabled="typeof settings === 'undefined' || !settings.isCloudImages" :command="{inputType: style.inputType, attributeName: style.attributeName, no: 0, type: 'cloudImages'}">免版权图库</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
        <el-button size="mini" type="info" icon="el-icon-view" plain :disabled="form[utils.toCamelCase(style.attributeName)] ? false : true" v-on:click="btnExtendPreviewClick(style.attributeName, 0)">
          预览
        </el-button>
        <el-button v-if="typeof btnExtendAddClick !== 'undefined'" size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="form[utils.getCountName(style.attributeName)] === 0" v-on:click="btnExtendAddClick(style)">
          新增
        </el-button>
      </el-button-group>
      <el-input
        v-model="form[utils.toCamelCase(style.attributeName)]"
        size="small"
        :placeholder="style.helpText || '请输入图片地址或点击上方按钮上传'">
      </el-input>
      <template v-for="n in form[utils.getCountName(style.attributeName)]">
        <el-button-group>
          <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传图片', name: 'formLayerImageUpload', inputType: style.inputType, attributeName: style.attributeName, no: n})">
            上传
          </el-button>
          <el-dropdown v-if="typeof btnImageSelectClick !== 'undefined'" v-on:command="btnImageSelectClick">
            <el-button size="mini" type="info" icon="el-icon-folder-opened" plain>
              选择<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="typeof siteId !== 'undefined'" :command="{inputType: style.inputType, attributeName: style.attributeName, no: n, type: 'uploadedImages'}">已上传图片</el-dropdown-item>
              <el-dropdown-item :command="{inputType: style.inputType, attributeName: style.attributeName, no: n, type: 'materialImages'}">素材库图片</el-dropdown-item>
              <!-- <el-dropdown-item :disabled="typeof settings === 'undefined' || !settings.isCloudImages" :command="{inputType: style.inputType, attributeName: style.attributeName, no: n, type: 'cloudImages'}">免版权图库</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
          <el-button size="mini" type="info" icon="el-icon-view" plain :disabled="form[utils.getExtendName(style.attributeName, n)] ? false : true" v-on:click="btnExtendPreviewClick(style.attributeName, n)">
            预览
          </el-button>
          <el-button v-if="typeof btnExtendAddClick !== 'undefined'" size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendAddClick(style)">
            新增
          </el-button>
          <el-button size="mini" type="info" icon="el-icon-remove-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendRemoveClick(style)">
            删除
          </el-button>
        </el-button-group>
        <el-input
          v-model="form[utils.getExtendName(style.attributeName, n)]"
          size="small"
          :placeholder="style.helpText || '请输入图片地址或点击上方按钮上传'">
        </el-input>
      </template>
    </el-form-item>
  </template>
  <!-- File -->
  <template v-else-if="style.inputType === 'File'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-button-group>
        <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传附件', name: 'formLayerFileUpload', inputType: style.inputType, attributeName: style.attributeName, no: 0})">
          上传
        </el-button>
        <el-button v-if="typeof runMaterialLayerFileSelect !== 'undefined'" size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择附件素材', name: 'materialLayerFileSelect', inputType: style.inputType, attributeName: style.attributeName, no: 0, full: true})">
          选择
        </el-button>
        <el-button v-if="typeof btnExtendAddClick !== 'undefined'" size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="form[utils.getCountName(style.attributeName)] === 0" v-on:click="btnExtendAddClick(style)">
          新增
        </el-button>
      </el-button-group>
      <el-input
        v-model="form[utils.toCamelCase(style.attributeName)]"
        size="small"
        :placeholder="style.helpText || '请输入附件地址或点击上方按钮上传'">
      </el-input>
      <template v-for="n in form[utils.getCountName(style.attributeName)]">
        <el-button-group>
          <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传附件', name: 'formLayerFileUpload', inputType: style.inputType, attributeName: style.attributeName, no: n})">
            上传
          </el-button>
          <el-button size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择附件素材', name: 'materialLayerFileSelect', inputType: style.inputType, attributeName: style.attributeName, no: n, full: true})">
            选择
          </el-button>
          <el-button v-if="typeof btnExtendAddClick !== 'undefined'" size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendAddClick(style)">
            新增
          </el-button>
          <el-button size="mini" type="info" icon="el-icon-remove-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendRemoveClick(style)">
            删除
          </el-button>
        </el-button-group>
        <el-input
          v-model="form[utils.getExtendName(style.attributeName, n)]"
          size="small"
          :placeholder="style.helpText || '请输入附件地址或点击上方按钮上传'">
        </el-input>
      </template>
    </el-form-item>
  </template>
  <!-- Video -->
  <template v-else-if="style.inputType === 'Video'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-button-group>
        <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传视频', name: 'formLayerVideoUpload', inputType: style.inputType, attributeName: style.attributeName, no: 0})">
          上传
        </el-button>
        <el-button size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择视频素材', name: 'materialLayerVideoSelect', inputType: style.inputType, attributeName: style.attributeName, no: 0, full: true})">
          选择
        </el-button>
        <el-button size="mini" type="info" icon="el-icon-view" plain :disabled="form[utils.toCamelCase(style.attributeName)] ? false : true" v-on:click="btnExtendPreviewVideoClick(form[utils.toCamelCase(style.attributeName)])">
          预览
        </el-button>
        <el-button v-if="typeof btnExtendAddClick !== 'undefined'" size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="form[utils.getCountName(style.attributeName)] === 0" v-on:click="btnExtendAddClick(style)">
          新增
        </el-button>
      </el-button-group>
      <el-input
        v-model="form[utils.toCamelCase(style.attributeName)]"
        size="small"
        :placeholder="style.helpText || '请输入视频地址或点击上方按钮上传'">
      </el-input>
      <template v-for="n in form[utils.getCountName(style.attributeName)]">
        <el-button-group>
          <el-button size="mini" type="info" icon="el-icon-upload2" plain v-on:click="btnLayerClick({title: '上传视频', name: 'formLayerVideoUpload', inputType: style.inputType, attributeName: style.attributeName, no: n})">
            上传
          </el-button>
          <el-button size="mini" type="info" icon="el-icon-folder-opened" plain v-on:click="btnLayerClick({title: '选择视频素材', name: 'materialLayerVideoSelect', inputType: style.inputType, attributeName: style.attributeName, no: n, full: true})">
            选择
          </el-button>
          <el-button size="mini" type="info" icon="el-icon-view" plain :disabled="form[utils.getExtendName(style.attributeName, n)] ? false : true" v-on:click="btnExtendPreviewVideoClick(form[utils.getExtendName(style.attributeName, n)])">
            预览
          </el-button>
          <el-button v-if="typeof btnExtendAddClick !== 'undefined'" size="mini" type="info" icon="el-icon-circle-plus-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendAddClick(style)">
            新增
          </el-button>
          <el-button size="mini" type="info" icon="el-icon-remove-outline" plain v-if="n === form[utils.getCountName(style.attributeName)]" v-on:click="btnExtendRemoveClick(style)">
            删除
          </el-button>
        </el-button-group>
        <el-input
          v-model="form[utils.getExtendName(style.attributeName, n)]"
          size="small"
          :placeholder="style.helpText || '请输入视频地址或点击上方按钮上传'">
        </el-input>
      </template>
    </el-form-item>
  </template>
  <!-- TextEditor -->
  <template v-else-if="style.inputType === 'TextEditor'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-button-group style="margin-bottom: 2px;">
        <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '导入Word', name: 'editorLayerWord', inputType: style.inputType, attributeName: style.attributeName})">
          导入Word
        </el-button>

        <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '上传图片', name: 'formLayerImageUpload', inputType: style.inputType, attributeName: style.attributeName})">
          上传图片
        </el-button>
        <el-dropdown v-if="typeof btnImageSelectClick !== 'undefined'" v-on:command="btnImageSelectClick">
          <el-button size="mini" type="info" plain style="padding-bottom: 6.5px;">
            选择图片<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="typeof siteId !== 'undefined'" :command="{inputType: style.inputType, attributeName: style.attributeName, no: 0, type: 'uploadedImages'}">已上传图片</el-dropdown-item>
            <el-dropdown-item :command="{inputType: style.inputType, attributeName: style.attributeName, no: 0, type: 'materialImages'}">素材库图片</el-dropdown-item>
            <!-- <el-dropdown-item :disabled="typeof settings === 'undefined' || !settings.isCloudImages" :command="{inputType: style.inputType, attributeName: style.attributeName, no: 0, type: 'cloudImages'}">免版权图库</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>

        <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '上传视频', name: 'editorLayerVideo', inputType: style.inputType, attributeName: style.attributeName, no: 0, width: 700, height: 600})">
          上传视频
        </el-button>
        <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '选择视频素材', name: 'materialLayerVideoSelect', inputType: style.inputType, attributeName: style.attributeName, no: 0, full: true})">
          选择视频
        </el-button>

        <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入音频', name: 'editorLayerAudio', inputType: style.inputType, attributeName: style.attributeName})">
          插入音频
        </el-button>
        <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入附件', name: 'editorLayerFile', inputType: style.inputType, attributeName: style.attributeName})">
          插入附件
        </el-button>
        <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入图文', name: 'editorLayerArticle', inputType: style.inputType, attributeName: style.attributeName, full: true})">
          插入图文
        </el-button>
      </el-button-group>
      <textarea
        :id="style.attributeName"
        :name="style.attributeName"
        v-html="form[utils.toCamelCase(style.attributeName)]"
        style="width: 100%;">
      </textarea>
      <div class="tips" v-if="style.helpText">{{style.helpText}}</div>
    </el-form-item>
  </template>
  <!-- TextArea -->
  <template v-else-if="style.inputType === 'TextArea'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-input
        v-model="form[utils.toCamelCase(style.attributeName)]"
        type="textarea"
        size="small"
        :placeholder="style.helpText"
        :autosize="{ minRows: 4, maxRows: 10}">
      </el-input>
    </el-form-item>
  </template>
  <!-- Text -->
  <template v-else-if="style.inputType === 'Text'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-input v-model="form[utils.toCamelCase(style.attributeName)]" :placeholder="style.helpText"></el-input>
    </el-form-item>
  </template>
  <!-- Number -->
  <template v-else-if="style.inputType === 'Number'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-input v-model.number="form[utils.toCamelCase(style.attributeName)]" :placeholder="style.helpText"></el-input>
    </el-form-item>
  </template>
  <!-- CheckBox -->
  <template v-else-if="style.inputType === 'CheckBox'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-checkbox-group v-model="form[utils.toCamelCase(style.attributeName)]">
          <el-checkbox v-for="item in style.items" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
      </el-checkbox-group>
      <div class="tips" v-if="style.helpText">{{style.helpText}}</div>
    </el-form-item>
  </template>
  <!-- Radio -->
  <template v-else-if="style.inputType === 'Radio'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-radio-group v-model="form[utils.toCamelCase(style.attributeName)]">
          <el-radio v-for="item in style.items" :key="item.value" :label="item.value">{{item.label}}</el-radio>
      </el-radio-group>
      <div class="tips" v-if="style.helpText">{{style.helpText}}</div>
    </el-form-item>
  </template>
  <!-- SelectOne -->
  <template v-else-if="style.inputType === 'SelectOne'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-select v-model="form[utils.toCamelCase(style.attributeName)]" :placeholder="style.helpText || '请选择'">
        <el-option
          v-for="item in style.items"
          :key="item.value"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>
  </template>
  <!-- SelectMultiple -->
  <template v-else-if="style.inputType === 'SelectMultiple'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-select v-model="form[utils.toCamelCase(style.attributeName)]" multiple :placeholder="style.helpText || '请选择'">
        <el-option
          v-for="item in style.items"
          :key="item.value"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>
  </template>
  <!-- Date -->
  <template v-else-if="style.inputType === 'Date'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-date-picker
        v-model="form[utils.toCamelCase(style.attributeName)]"
        type="date"
        value-format="yyyy-MM-dd"
        :placeholder="style.helpText || '请选择日期'">
      </el-date-picker>
    </el-form-item>
  </template>
  <!-- DateTime -->
  <template v-else-if="style.inputType === 'DateTime'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-date-picker
        v-model="form[utils.toCamelCase(style.attributeName)]"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        :placeholder="style.helpText || '请选择日期时间'">
      </el-date-picker>
    </el-form-item>
  </template>
  <!-- SelectCascading -->
  <template v-else-if="style.inputType === 'SelectCascading' && style.relatedFieldId > 0">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <el-cascader
        v-model="form[utils.toCamelCase(style.attributeName)]"
        filterable
        :options="relatedFields[style.relatedFieldId]"
        :props="{ checkStrictly: true }"
        :placeholder="style.helpText || '请选择'">
      </el-cascader>
    </el-form-item>
  </template>
  <!-- Customize -->
  <template v-else-if="style.inputType === 'Customize'">
    <el-form-item :label="style.displayName" :prop="utils.toCamelCase(style.attributeName)" :rules="utils.getRules(style.rules)">
      <div v-html="style.customizeCode"></div>
    </el-form-item>
  </template>
</template>